<template>
  <div class="city">
    <div class="search_wrap">
      <div class="search">
        <i class="fa fa-search"></i>
        <input
          type="text"
          v-model="city_val"
          placeholder="输入城市名"
          v-focus
        />
      </div>
      <!-- 解决 点击取消没有城市信息 的bug -->
      <button @click="$router.push({ name: 'address', params: { city } })">
        取消
      </button>
    </div>
    <div style="height: 100%" v-if="searchList.length === 0">
      <div class="location">
        <!-- 注意：这里的 @click 的点击事件是从子组件中注册后传过来的 -->
        <Location @click="selectCity({ name: city })" :address="city" />
      </div>
      <Alphabet
        @selectcity="selectCity"
        ref="allCity"
        :cityInfo="cityInfo"
        :keys="keys"
      />
    </div>
    <div class="search_list" v-else>
      <ul>
        <!-- 给搜索到的城市添加一个点击事件，用于传值 -->
        <li
          @click="selectCity(item)"
          v-for="item in searchList"
          :key="item.area_code"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Location from "../components/Location";
import Alphabet from "../components/Alphabet";
import { debounce } from "../utils/debounce";
export default {
  name: "City",

  data() {
    return {
      city_val: "",
      cityInfo: null, // 城市集合
      keys: [], // 字母表
      allCities: [], // 接收所有的城市名包括热门城市(搜索框)
      searchList: [], // 接收城市搜索结果
    };
  },

  components: {
    Location,
    Alphabet,
  },

  created() {
    this.getCityInfo();
  },

  methods: {
    // 获取城市信息
    getCityInfo() {
      this.$axios("/api/posts/cities")
        .then((res) => {
          this.cityInfo = res.data;
          this.keys = Object.keys(res.data);
          // 将字母表中的最后一项移除，因为最后一项是热门城市
          this.keys.pop();
          // 将字母表中的信息从A-Z按顺序排序
          this.keys.sort();

          // 数据调用完成并且成功返回就可以调用执行 BScroll 了
          // 同样是通过 refs 获取组件的实例进行调用
          // this.$nextTick 会在DOM更新结束之后执行回调，在 $nextTick 中调用 initScroll 是为了确保DOM节点已经加载完成
          this.$nextTick(() => {
            // this.$refs.allCity 就可以拿到整个 Alphabet 组件
            this.$refs.allCity.initScroll();
          });
          // 存储所有的城市
          this.keys.forEach((key) => {
            // console.log(key);
            this.cityInfo[key].forEach((city) => {
              this.allCities.push(city);
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击传递城市名
    selectCity(city) {
      // console.log(city);
      this.$router.push({ name: "address", params: { city: city.name } });
    },
    // 匹配搜索的城市信息
    searchCity() {
      if (!this.city_val) {
        // 输入框为空，那么所搜索到的城市自然为空
        this.searchList = [];
      } else {
        // 有输入内容并且相匹配
        this.searchList = this.allCities.filter((city) => {
          return city.name.indexOf(this.city_val) !== -1;
        });
      }
    },
  },

  computed: {
    // 获取地址中的城市信息
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      );
    },
  },

  watch: {
    // 监听城市搜索框
    city_val: debounce(function () {
      // console.log(this.city_val);
      this.searchCity();
    }, 800),
  },
};
</script>

<style scoped>
.city {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 45px;
}
.search_wrap {
  position: fixed;
  top: 0;
  height: 45px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 3px 16px;
  display: flex;
  justify-content: space-between;
}
.search {
  background-color: #eee;
  border-radius: 10px;
  line-height: 40px;
  width: 85%;
  box-sizing: border-box;
  padding: 0 16px;
}
.search input {
  background: #eee;
  outline: none;
  border: none;
  margin-left: 5px;
}
.search_wrap button {
  outline: none;
  border: none;
  color: #009eef;
  background-color: #fff;
}

.location {
  background: #fff;
  padding: 8px 16px;
  height: 65px;
  box-sizing: border-box;
}
.search_list {
  background: #fff;
  padding: 5px 16px;
}
.search_list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>